<template>
  <div class="components-user-info">
    <el-dialog
      v-model="visible"
      :title="$t('distributionMsg.titleTip1')"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        label-width="auto"
        @submit.prevent
      >
        <el-form-item
          :label="$t('distributionMsg.distriTelPhone')"
        >
          <el-input
            v-model="dataForm.userMobile"
            :readonly="true"
          />
        </el-form-item>

        <el-form-item
          :label="$t('distribution.idCardNo')"
        >
          <el-input
            v-model="dataForm.identityCardNumber"
            :readonly="true"
          />
        </el-form-item>

        <el-form-item
          :label="$t('distribution.realName')"
        >
          <el-input
            v-model="dataForm.realName"
            :readonly="true"
          />
        </el-form-item>

        <el-form-item :label="$t('distribution.personalInfo')">
          <div
            v-if="infoList.length"
            class="pic-con"
          >
            <div
              v-for="(pic, index) in infoList"
              :key="index"
              class="pic-item"
            >
              <el-image
                style="width:100px;height:100px"
                :src="resourcesUrl + pic.srcLink"
                :preview-src-list="srcList"
              />
              <div>{{ pic.title }}</div>
            </div>
          </div>
          <span v-else>{{ $t('distribUserWallet.nothing') }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div
            class="default-btn"
            @click="visible = false"
          >
            {{ $t('seckill.close') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

const dataForm = reactive({
  realName: '',
  identityCardNumber: '',
  userMobile: '',
  identityCardPicFront: '',
  identityCardPicBack: '',
  identityCardPicHold: ''
})
const dataFormRef = ref(null)
const visible = ref(false)
const infoList = ref([])
const srcList = ref([])
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL

const init = (data) => {
  visible.value = true
  nextTick(() => {
    dataFormRef.value.resetFields()
  })
  dataForm.realName = data.realName
  dataForm.identityCardNumber = data.identityCardNumber
  dataForm.userMobile = data.userMobile
  dataForm.identityCardPicFront = data.identityCardPicFront
  dataForm.identityCardPicBack = data.identityCardPicBack
  dataForm.identityCardPicHold = data.identityCardPicHold
  const tempInfoList = []
  if (dataForm.identityCardPicFront) {
    tempInfoList.push({
      title: $t('distributionMsg.idCardFront'),
      srcLink: dataForm.identityCardPicFront
    })
  }
  if (dataForm.identityCardPicBack) {
    tempInfoList.push({
      title: $t('distributionMsg.idCardBack'),
      srcLink: dataForm.identityCardPicBack
    })
  }
  if (dataForm.identityCardPicHold) {
    tempInfoList.push({
      title: $t('distributionMsg.holdIdCard'),
      srcLink: dataForm.identityCardPicHold
    })
  }
  infoList.value = tempInfoList
  if (tempInfoList.length) {
    for (let i = 0; i < tempInfoList.length; i++) {
      const element = tempInfoList[i]
      srcList.value.push(resourcesUrl + element.srcLink)
    }
  }
}

defineExpose({
  init
})
</script>
